<template>
  <div>
    <el-dialog
      title="新建出货结算"
      :visible.sync="dialogshow"
      :before-close="dialogClose"
      style="display: none"
      top="10vh"
      width="90%"
      :fullscreen="fullscreen"
    >
      <dialog-tools
        v-bind:back="true"
        v-bind:next="true"
        v-bind:goback="true"
        v-bind:prev="true"
        v-bind:screen="true"
        @clickfullscreen="clickfullscreen"
      >
      </dialog-tools>
      <el-tabs
        class="tabs-table customer-tabs"
        type="border-card"
        v-model="activeName"
      >
        <el-tab-pane label="基本信息" name="first">
          <el-form
            id="form-returns"
            size="mini"
            :model="formData"
            label-width="100px"
          >
            <el-row class="item-w230">
              <el-form-item label="客户名称">
                <el-input
                  v-model="customer.customercode"
                  auto-complete="off"
                  @click.native="handleButtons(2)"
                ></el-input>
              </el-form-item>

              <el-form-item label="客户代码" prop="customercate">
                <el-input
                  v-model="customer.bankaccount"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="creditrank">
                <el-input
                  v-model="customer.certificateno"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              
              <el-form-item label="创建时间" prop="field101">
                <el-date-picker
                  type="datetime"
                  v-model="formData.datetime"
                  placeholder="创建时间"
                  style="width: 100%"
                  clearable
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="客户审核">
                <el-select v-model="customer.creditrank" filterable>
                  <el-option
                    v-for="item in shzt"
                    :label="item.typename"
                    :key="item.id"
                    :value="item.typename"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审核时间" prop="field101">
                <el-date-picker
                  type="datetime"
                  v-model="formData.datetime"
                  placeholder="审核时间"
                  style="width: 100%"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-row>
            <el-row class="item-w230">
              <el-form-item label="物品名称" prop="customercate">
                <el-input
                  v-model="customer.bankaccount"
                  auto-complete="off"
                  @click.native="handleButtons(3)"
                  placeholder="物品1、物品2"
                ></el-input>
              </el-form-item>
              <el-form-item label="数量" prop="customercate">
                <el-input
                  v-model="customer.bankaccount"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="出货条码号" prop="creditrank">
                <el-input
                  v-model="customer.certificateno"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="订单号" prop="creditrank">
                <el-input
                  v-model="customer.certificateno"
                  auto-complete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="生产单号" prop="creditrank">
                <el-input
                  v-model="customer.certificateno"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row class="item-w230">
              <el-form-item label="总费用">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="优惠金额">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="结算状态">
                <el-select v-model="customer.jszt" filterable>
                  <el-option
                    v-for="item in jszt"
                    :label="item.typename"
                    :key="item.id"
                    :value="item.typename"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="是否开票" prop="field3000">
                <el-checkbox-group v-model="formData.field3000" size="medium">
                  <el-checkbox
                    v-for="(item, index) in field3000Options"
                    :key="index"
                    :label="item.value"
                    :disabled="item.disabled"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item> -->
              <el-form-item label="结算币种">
                <el-input
                  v-model="customer.bank"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="汇率">
                <el-input
                  v-model="customer.bank"
                  auto-complete="off"
                ></el-input>
              </el-form-item> </el-row
            ><el-row class="item-w230">
              <el-form-item label="收货地址">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="物流公司">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="物流单号">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="出货状态">
                <el-select v-model="customer.chzt" filterable>
                  <el-option
                    v-for="item in chzt"
                    :label="item.typename"
                    :key="item.id"
                    :value="item.typename"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出货时间" prop="field101">
                <el-date-picker
                  v-model="formData.datetime"
                  placeholder="出货时间"
                  style="width: 100%"
                  clearable
                ></el-date-picker>
              </el-form-item> </el-row
            ><el-row class="item-w230">
              
              <el-form-item label="审核状态">
                <el-select v-model="customer.creditrank" filterable>
                  <el-option
                    v-for="item in shzt"
                    :label="item.typename"
                    :key="item.id"
                    :value="item.typename"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审核人">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="审核时间">
                <el-date-picker
                  v-model="formData.datetime"
                  type="datetime"
                  style="width: 100%"
                  placeholder="审核时间"
                  clearable
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="客户审核">
                <el-select
                  v-model="customer.kfsh"
                  filterable
                >
                  <el-option
                    v-for="item in shzt"
                    :label="item.typename"
                    :key="item.id"
                    :value="item.typename"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="备注">
                <el-input
                  v-model="customer.address"
                  auto-complete="off"
                  type="textarea"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-form>

          <el-row style="margin-bottom: 5px"
            >物品列表
            <el-button
              style="float: right; margin-left: 15px"
              type="primary"
              @click="handleButtons(3)"
              icon="el-icon-plus"
              size="small"
              >添加</el-button
            ></el-row
          >
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
            stripe
            show-summary
            row-class-name="tableRow"
            header-row-class-name="tableHeader"
            @row-dblclick="handleButtons('productedit')"
            style="width: 100%; border-top: 1px solid #c5c5c5;height:auto;"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="kfmc" label="客户名称" width="150">
            </el-table-column>
            <el-table-column prop="image" label="图片" width="120">
              <template scope="scope">
                <img
                  :src="scope.row.image"
                  width="40"
                  height="40"
                  class="head_pic"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="物品名称" width="120">
            </el-table-column>
            <el-table-column
              
              prop="province"
              label="款号"
              width="120"
            ></el-table-column>
            <el-table-column prop="price" label="费用" width="120">
            </el-table-column>
            <el-table-column prop="sale_no" label="订单单号" width="150">
            </el-table-column>
            <el-table-column prop="status" label="审批状态" width="150">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>审批人: {{ scope.row.sale_no }}</p>
                  <p>审批时间: {{ scope.row.date }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.status }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            

            <el-table-column
              
              prop="zip"
              label="单位"
              width="120"
            >
            </el-table-column>

            <el-table-column
              
              prop="zip"
              label="数量"
              width="120"
            >
            </el-table-column>
            <el-table-column
              
              prop="zip"
              label="规格尺寸"
              width="120"
            >
            </el-table-column>
            <el-table-column
              
              prop="city"
              label="金料品类"
              width="120"
            >
            </el-table-column>
            <el-table-column width="80"  fixed="right">
                    <template slot="header" slot-scope="scope">
                      <el-tooltip content="删除选中" placement="bottom">
                        <el-button
                          @click="dialogAdd"
                          type="danger"
                          icon="el-icon-delete"
                          size="mini"
                        >
                        </el-button>
                      </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                      <el-tooltip content="删除" placement="bottom">
                        <el-button
                          @click="dialogAdd"
                          type="danger"
                          icon="el-icon-delete"
                          size="mini"
                        >
                        </el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="third"> </el-tab-pane>
        <el-tab-pane label="附件" name="bs"> </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <!-- <el-dropdown style="float: left; margin-left: 15px">
          <el-button>
            关联数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>设计图</el-dropdown-item>
            <el-dropdown-item>客来石</el-dropdown-item>
            <el-dropdown-item>客来金</el-dropdown-item>
            <el-dropdown-item>其它...</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          style="float: left; margin-left: 15px"
          @click="handleButtons(3)"
          icon="el-icon-search"
          >添加产品</el-button
        > -->

        <el-button type="primary" icon="el-icon-printer"></el-button>
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="dialogAdd">确定</el-button>
      </div>
    </el-dialog>

    <!-- <customer-genji
                v-bind:dialogshow="dialogCustomerGenji"
                @dialog_close="dialog_close_genji_customer"
        ></customer-genji> -->
    <dialog-search-customer
      v-bind:dialogshow="dialogSearchCustomer"
      @dialog_close="dialog_close_search_customer"
    ></dialog-search-customer>
    <dialog-search-product
      v-bind:dialogshow="dialogSearchProduct"
      @dialog_close="dialog_close_search_product"
    ></dialog-search-product>
        <dialog-product-edit
      v-bind:dialogshow="dialogProductEdit"
      @dialog_close="dialog_close_product_edit"
    ></dialog-product-edit>
  </div>
</template>

<style scoped>
#customerDialog .el-form-item {
  width: 45%;
  float: left;
  margin-bottom: 5px;
}

#customerDialog .el-form-item:nth-child(odd) {
  float: right;
}

.el-dialog__body,
.el-form {
  overflow: hidden;
}

#customerDetail .el-form {
  border: 1px solid #c5c5c5;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#form-returns .item-w230 .el-form-item {
  width: 230px;
  float: left;
  margin-bottom: 5px;
}
#form-returns .el-row {
  margin-bottom: 0px;
}
#form-returns.el-form--label-top .el-form-item__label {
  padding-bottom: 0px;
}
#form-returns .el-divider--horizontal {
  margin: 5px 0;
}

.td-lable,
.td-info {
  display: inline-table;
  vertical-align: -webkit-baseline-middle;
}

.td-lable {
  text-align: right;
  width: 100px;
}

.td-info {
  margin-left: 20px;
}

ul {
  list-style-type: none;
}

ul span {
  display: inline-table;
  min-width: 200px;
}

.tabs-table td {
  height: 50px;
  border-bottom: 1px solid #dcdfe6;
}
.customer-tabs .el-tab-pane {
  height: 400px;
  overflow: auto;
  padding: 20px;
}
</style>

<script>
module.exports = {
  methods: {
    dialogAdd() {
      this.$confirm("是否继续操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    dialogClose() {
      this.$emit("dialog_close", 1);
    },
    clickfullscreen() {
      this.fullscreen = !this.fullscreen;
    },

    dialog_close_search_customer(val) {
      console.log(val);
      this.dialogSearchCustomer = false;
    },
    dialog_close_search_product(val) {
      console.log(val);
      this.dialogSearchProduct = false;
    },
    dialog_close_product_edit(val) {
      console.log(val);
      this.dialogProductEdit = false;
    },

    handleButtons(val) {
      console.log(2222);
      switch (val) {
        case "productedit":
                  this.dialogProductEdit = "true";
          console.log(this.dialogProductEdit);
          break;  
        case 1:
          this.dialogSendMessage = "true";
          console.log(this.dialogSendMessage);
          break;
        case 2:
          console.log(333);
          this.dialogSearchCustomer = "true";
          console.log(this.dialogSearchCustomer);
          break;
        case 3:
          console.log(333);
          this.dialogSearchProduct = "true";
          console.log(this.dialogSearchProduct);
          break;

        case 10:
          console.log(333);
          this.dialogCustomerInfo = "false";
          this.dialogCustomerGenji = "true";
          console.log(this.dialogCustomerGenji);
          break;
        case 22: //编辑报价
          console.log("报价");
          this.dialogBaojiaEdit = "true";
          console.log(this.dialogBaojiaEdit);
          break;
      }
    },
    addData() {
      this.tableDatas.push({
        edit: true,
      });
    },
    //确认添加
    confirmAdd(row) {
      row.edit = false;
    },
    //修改
    editData(row) {
      row.edit = true;
    },
    //删除
    deleteData(row, index) {
      this.tableDatas.splice(index, 1);
    },
  },
  props: ["dialogshow"],
  data() {
    return {
      active: 0,
      fullscreen: false,
      dialogBaojiaEdit: false,
      activeName: "first",
      dialogSendMessage: false,
      dialogCustomerInfo: false,
      dialogCustomerGenji: false,
      // dialogshow:false,
      dialogSendMessage: false,
      // dialogCustomerInfo: false,
      // dialogCustomerGenji: false,
      dialogSearchCustomer: false,
      dialogSearchProduct: false,
      dialogProductEdit: false,
      Sendmssages: {
        address: "",
        customercate: "",
        cate: "",
        nickname: "",
        creditrank: "",
        name: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          id: "1",
          kfmc:"某公司",
          sale_no: "12987126",
          rowspan: 3,
          name: "物品一",
          status: "审批中",
          sale_type: "现货",
          province: "BC1001",
          city: "足金999",
          address: "A类",
          zip: "",
          sale_price: "10.00",
          ex_factory_price: "3%",
          sale_cate: "打折",
        },
        {
          id: "2",
          sale_no: "12987126",
          rowspan: 0,
          date: "2016-05-04",
          name: "物品一2",
          sale_type: "订单",
          status: "代审批",
          province: "BC1002",
          city: "足金999",
          address: "A类",
          sale_price: "11.00",
          ex_factory_price: "8%",
          sale_cate: "批发",
          zip: "",
        },
        {
          id: "3",
          sale_no: "12987126",
          rowspan: 0,
          date: "2016-05-01",
          name: "物品一3",
          status: "已审批",
          sale_type: "订单",
          province: "BC1003",
          city: "足金999",
          address: "A类",
          sale_price: "10.00",
          ex_factory_price: "11%",
          sale_cate: "零售",
          zip: "",
        },
        {
          id: "4",
          sale_no: "12987127",
          rowspan: 1,
          date: "2016-05-03",
          name: "物品一4",
          sale_type: "现货",
          status: "审批中",
          province: "BC1004",
          city: "足金999",
          sale_price: "10.00",
          address: "A类",
          ex_factory_price: "13%",
          sale_cate: "其他",
          zip: "",
        },
        {
          id: "5",
          sale_no: "12987128",
          rowspan: 1,
          date: "2016-05-03",
          name: "物品一4",
          sale_type: "现货",
          status: "审批中",
          province: "BC1004",
          city: "足金999",
          sale_price: "10.00",
          address: "A类",
          ex_factory_price: "13%",
          sale_cate: "其他",
          zip: "",
        },
      ],
      tableDataWp: [
        {
          id: "1",
          image: "/public/images/eh1.jpg",
          wpmc: "戒指",
          number: "1",
          hz: "20",
          ggcc: "20X20mm",
          wpdj: "A类",
          dw: "件",
          zl: "20",
          memo: "",
        },
        {
          id: "2",
          image: "/public/images/eh1.jpg",
          wpmc: "证书",
          number: "1",
          hz: "20",
          ggcc: "20X20mm",
          wpdj: "A类",
          dw: "件",
          zl: "20",
          memo: "",
        },
        {
          id: "3",
          image: "/public/images/eh1.jpg",
          wpmc: "包装盒",
          number: "1",
          hz: "20",
          ggcc: "20X20mm",
          wpdj: "A类",
          dw: "件",
          zl: "20",
          memo: "",
        },
      ],
      tableDataLl: [
        {
          id: "1",
          image: "/public/images/eh1.jpg",
          wpmc: "客来石",
          number: "3",
          hz: "20",
          ggcc: "20X20mm",
          wpdj: "A类",
          dw: "粒",
          zl: "22",
          memo: "",
        },
        {
          id: "1",
          image: "/public/images/eh1.jpg",
          wpmc: "客来金",
          number: "23",
          hz: "20",
          ggcc: "20X20mm",
          wpdj: "A类",
          dw: "克",
          zl: "20",
          memo: "",
        },
      ],
      formData: {
        field101: null,
        field3000: false,
        datetime: "",
      },
      rules: {
        field101: [],
        field3000: [],
        datetime: [],
      },
      field3000Options: [
        {
          label: "是",
          value: 1,
        },
      ],

      customerstaffs: [
        { typename: "员工一" },
        { typename: "员工二" },
        { typename: "员工三" },
        { typename: "员工四" },
      ],
      changeReason: [
        { typename: "原因一" },
        { typename: "原因二" },
        { typename: "原因三" },
        { typename: "原因四" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      customer: {
        name: "",
        customercode: "",
        customerstatus: "",
        customercate: "",
        creditrank: "",
        creditline: "",
        capital: "",
        annualsales: "",
        bank: "",
        certificateno: "",
        address: "",
        area: "",
        brand: "",
        bankaccount: "",
        trademark: "",
        website: "",
        lperson: "",
        lphone: "",
        contacts: "",

        phone: "",
        phonenum: "",
        weixin: "",
        email: "",
        fax: "",
        resource: "",
        requirement: "",
        ordercountmonth: "",
        purchaseamountmonth: "",
        ordercountyear: "",
        purchaseamountyear: "",
        customerstaffname: "",
        customerstaffcode: "",
        operator: "",
        insertime: "",
        remark: "",
        jsfs: "",
        chzt: "",
        jszt: "",
        shzt: "",
      },
      thhyy: [
        { id: 1, typename: "公司原因" },
        { id: 2, typename: "客户原因" },
        { id: 3, typename: "供应商原因" },
        { id: 4, typename: "其它原因" },
      ],
      jsfs: [
        { id: 1, typename: "月结" },
        { id: 2, typename: "现结" },
        { id: 3, typename: "预付全款" },
        { id: 4, typename: "分期付款" },
        { id: 5, typename: "货到付款" },
        { id: 6, typename: "其它" },
      ],
      chzt: [
        { id: 1, typename: "待出库" },
        { id: 2, typename: "已出库待发货" },
        { id: 3, typename: "已发货" },
        { id: 4, typename: "待签收" },
        { id: 5, typename: "已确认收货" },
        { id: 5, typename: "申请退换货" },
        { id: 5, typename: "退换货确认" },
      ],
      jszt: [
        { id: 1, typename: "未结算" },
        { id: 1, typename: "部分结算" },
        { id: 2, typename: "已结算" },
      ],
      shzt: [
        { id: 1, typename: "待审核" },
        { id: 2, typename: "已审核" },
        { id: 3, typename: "未通过" },
        { id: 4, typename: "--" },
      ],
      crmsclientStatic: [
        { id: 1, typename: "A级" },
        { id: 2, typename: "B级" },
        { id: 3, typename: "C级" },
        { id: 4, typename: "D级" },
      ],

      scheduleType: [
        { typename: "业务拓展" },
        { typename: "订单跟进" },
        { typename: "料/款跟进" },
      ],

      cates: [{ typename: "意向客户" }, { typename: "老客户" }],

      crmsclientRank: [
        { typename: "A类" },
        { typename: "B类" },
        { typename: "C类" },
        { typename: "D类" },
      ],
    };
  },
  components: {
    "dialog-tools": "url:../tools/dialog-tools.vue",
    "dialog-search-customer": "url:./search-customer.vue",
    "dialog-search-product": "url:./search-product.vue",
    "dialog-product-edit": "url:./product-edit.vue",
    //   'genjin-jilu': 'url:../genjin-jilu.vue',
    //   'customer-genji': 'url:../customer-genji.vue',
  },
};
</script>
